<template>
	<el-row class="tac">
		<el-col :span="12" style="width: 100%">
			<el-menu
				default-active="2"
				class="el-menu-vertical-demo"
				background-color="#545c64"
				text-color="#fff"
				active-text-color="#ffd04b"
				@select="jump($event)"
				style="border: none;
						margin-bottom: 15px;"
			>
				<el-menu-item index="note">
					<svg class="icon" aria-hidden="true" style="margin-right:10px"><use xlink:href="#icon-biji"></use></svg>
					<span slot="title">随手记</span>
				</el-menu-item>
				<el-menu-item index="tree">
					<svg class="icon" aria-hidden="true" style="margin-right:10px"><use xlink:href="#icon-fanqie"></use></svg>
					<span slot="title">番茄钟</span>
				</el-menu-item>
				<el-menu-item index="time">
					<svg class="icon" aria-hidden="true" style="margin-right:10px"><use xlink:href="#icon-70BasicIcons-all-49"></use></svg>
					<span slot="title">日历</span>
				</el-menu-item>
				<el-menu-item index="friend">
					<svg class="icon" aria-hidden="true" style="margin-right:10px"><use xlink:href="#icon--"></use></svg>
					<span slot="title">好友</span>
				</el-menu-item>
			</el-menu>
		</el-col>
	</el-row>
</template>

<script>
export default {
	name: 'leftColumn',
	methods: {
		//跳转页面
		jump(e) {
			if (this.$globalVariant.fileChanged) {
				this.$alert('您的文件还未保存，请先保存', '提示', {
					confirmButtonText: '确定'
				});
			} else {
				this.$router.replace({ path: `/${e}` }); //跳转到相应的页面
			}
		}
	}
};
</script>
<style></style>
